<template>
  <div class="home">
    <header class="container-fluid">
      <div id="head" class="container">
        <div class="head-logo">
          <img src="@/assets/logo.png" alt="LOGO" title="LOGO" />
          LOGO
        </div>
        <ul class="head-menu">
          <router-link
            v-for="(item, index) in headMenu"
            :key="index"
            :to="item.to"
          >
            <li>{{ item.title }}</li>
          </router-link>
        </ul>
      </div>
    </header>
    <section id="banner" class="container-fluid">
      <swiper :options="swiperOption" ref="mySwiper">
        <swiper-slide v-for="swiperItem in swiperList" :key="swiperItem.id">
          {{ swiperItem.title }}
          <!-- <img :src="swiperItem.img" :alt="swiperItem.title" /> -->
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
        <div class="swiper-button-prev" slot="button-prev"></div>
        <div class="swiper-button-next" slot="button-next"></div>
      </swiper>
    </section>
    <section id="service" class="container">
      <div class="area-title">
        <h2>服务范围</h2>
        <p>OUR SERVICES</p>
      </div>
      <ul class="service-list">
        <li
          class="service-item"
          v-for="serviceItem in serviceList"
          :key="serviceItem.id"
        >
          <div
            :style="
              'background: url(' + serviceItem.img + ') no-repeat center;'
            "
          ></div>
          <h3>{{ serviceItem.title }}</h3>
          <p v-html="serviceItem.description"></p>
        </li>
      </ul>
    </section>
    <section id="case" class="container-fluid">
      <div class="container case-container">
        <div class="area-title">
          <h2>[ 案 例 ]</h2>
          <p>
            With the best professional technology, to design the best innovative
            web site
          </p>
        </div>
        <ul class="case-list">
          <li v-for="caseItem in caseList" :key="caseItem.id" class="case-item">
            <div class="case-item-thumb">
              <a href="#">
                <img :src="caseItem.img" :alt="caseItem.title" />
              </a>
            </div>
            <div class="case-item-tip">{{ caseItem.title }}</div>
          </li>
        </ul>
        <div class="other-cases">
          <a href="#">VIEW MORE</a>
        </div>
      </div>
    </section>
    <footer class="container-fluid">
      <div class="container footer-container">
        <span class="copyright">Copyright BUAA 2021.1.28 XYX </span>
        <span class="others">
          <a href="#">HOME</a>
        </span>
      </div>
    </footer>
  </div>
</template>

<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
// import axios from 'axios'

export default {
  name: "Home",
  components: {
    swiper,
    swiperSlide,
  },
  data() {
    return {
      headMenu: [
        {
          title: "首页",
          to: "/",
        },
        {
          title: "资讯",
          to: "/",
        },
        {
          title: "用户信息",
          to: "/dashboard",
        },
      ],

      swiperOption: {
        loop: true,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
        // 显示分页
        pagination: {
          el: ".swiper-pagination",
          clickable: true, //允许分页点击跳转
        },
        // 设置点击箭头
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
      swiperList: [
        {
          id: 1,
          img: null,
          title: "I'm Slide 1",
        },
        {
          id: 2,
          img: null,
          title: "I'm Slide 2",
        },
        {
          id: 3,
          img: null,
          title: "I'm Slide 3",
        },
        {
          id: 4,
          img: null,
          title: "I'm Slide 4",
        },
      ],

      serviceList: [
        {
          id: 1,
          title: "1. Web Design",
          img: require("@/assets/services/web1.png"),
          description: "企业品牌网站设计/手机网站制作<br/>动画网站创意设计",
        },
        {
          id: 2,
          title: "2. Graphic Design",
          img: require("@/assets/services/graphic1.png"),
          description: "标志LOGO设计 / 产品宣传册设计<br/>企业广告 / 海报设计",
        },
        {
          id: 3,
          title: "3. E-Bussiness Plan",
          img: require("@/assets/services/e-bussiness1.png"),
          description: "淘宝 / 天猫装修设计及运营推广<br/>企业微博 / 微信营销",
        },
        {
          id: 4,
          title: "4. Mailbox Agents",
          img: require("@/assets/services/mail1.png"),
          description: "腾讯 / 网易企业邮箱品牌代理<br/>个性化邮箱定制开发",
        },
      ],

      caseList: [
        {
          id: 1,
          title: "CASE 1",
          img: require("@/assets/cases/case2.jpg"),
        },
        {
          id: 2,
          title: "CASE 2",
          img: require("@/assets/cases/case1.jpg"),
        },
        {
          id: 3,
          title: "CASE 3",
          img: require("@/assets/cases/case3.jpg"),
        },
      ],
    };
  },
  methods: {
    onSwiper(swiper) {
      console.log(swiper);
    },
    onSlideChange() {
      console.log("slide change");
    },
  },
};
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
.container {
  width: 1080px;
}
.container-fluid {
  width: 100%;
}
ul {
  list-style-type: none;
}

.home {
  display: flex;
  flex-direction: column;
  align-items: center;

  header {
    height: 80px;
    position: fixed;
    top: 0;
    background-color: rgba(255, 255, 255, 0.8);
    border-bottom: 1px solid #f2f2f2;
    z-index: 10;

    display: flex;
    flex-direction: row;
    justify-content: center;

    #head {
      height: 100%;

      display: flex;
      flex-direction: row;
      align-items: center;

      .head-logo {
        height: 44px;
        color: #646464;
        font-size: 20px;
        margin-right: auto;

        display: flex;
        align-items: center;

        img {
          height: 100%;
          margin-right: 24px;
        }
      }

      .head-menu {
        display: flex;

        li {
          margin-left: 58px;
          cursor: pointer;
        }
      }
    }
  }

  #banner {
    height: 400px;
    margin-top: 80px;

    .swiper-container {
      height: 100%;
      background: #bbdfc8;

      .swiper-slide {
        line-height: 400px;
        text-align: center;
      }
    }
  }

  #service {
    display: flex;
    flex-direction: column;
    align-items: center;

    .area-title {
      margin-top: 50px;

      display: flex;
      flex-direction: column;
      align-items: center;

      h2 {
        height: 30px;
        font-size: 18px;
        line-height: 30px;
        color: #6d6d6d;
        font-weight: normal;
      }

      p {
        font-size: 12px;
        color: #9d9d9d;
      }
    }

    .service-list {
      margin-top: 30px;
      width: 100%;

      display: flex;
      flex-direction: row;
      justify-content: space-between;

      .service-item {
        padding-bottom: 24px;
        border-bottom: 4px solid white;

        display: flex;
        flex-direction: column;
        align-items: center;

        &:hover {
          border-bottom: 4px solid #91d6c9;
        }

        div {
          width: 250px;
          height: 120px;
          // background: url(../../assets/web1.png) no-repeat center;
        }

        h3 {
          font-size: 20px;
          color: #747474;
          margin: 8px 0 12px 0;
        }

        p {
          font-size: 14px;
          color: #999999;
        }
      }
    }
  }

  #case {
    background-color: #f8f8f8;

    display: flex;
    flex-direction: column;
    align-items: center;

    .case-container {
      margin: 50px 0;

      display: flex;
      flex-direction: column;
      align-items: center;

      .area-title {
        h2 {
          height: 30px;
          line-height: 30px;
          text-align: center;
          font-size: 18px;
          font-weight: normal;
          color: #66c5b4;
        }

        p {
          font-size: 12px;
          color: #9d9d9d;
          text-align: center;
        }
      }

      .case-list {
        width: 100%;
        margin-top: 40px;

        display: flex;
        flex-direction: row;
        justify-content: space-between;

        .case-item {
          position: relative;

          .case-item-tip {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 10;
            background-image: url(../../assets/cases/case-tip-bg.png);
            color: #ffffff;
            display: none;
            text-align: center;
            padding-top: 120px;
          }

          &:hover {
            .case-item-tip {
              display: block;
            }
          }
        }
      }

      .other-cases {
        width: 160px;
        height: 35px;
        margin-top: 40px;
        text-align: center;
        background-color: #66c5b4;
        border-radius: 20px;

        a {
          width: 100%;
          height: 100%;
          line-height: 35px;
          color: #ffffff;

          &:hover {
            text-decoration: underline;
          }
        }
      }
    }
  }

  footer {
    background-color: #66c5b4;
    border-radius: 2px;
    margin: 50px 0;

    display: flex;
    justify-content: center;

    .footer-container {
      display: flex;

      .copyright {
        height: 54px;
        line-height: 54px;
        color: #ffffff;
        font-size: 12px;
        margin-right: auto;
      }

      .others {
        height: 54px;
        line-height: 54px;
        font-size: 12px;
        color: #ffffff;
      }
    }
  }
}
</style>
